<template>
	<!-- 健康证认证 -->
	<view class="healthy">
		<!-- #ifdef APP-PLUS -->
		<top-set></top-set>
		<tab-top fixed="true" title="健康证认证"></tab-top>
		<!-- #endif -->
		<view class="bg_01"></view>
		<view class="set_box">
			<!-- 个人资料 -->
			<view class="set_item" @tap="changeDate">
				<view class="set_item_left"><text>健康证截止日期</text></view>
				<view class="set_item_reght">
					<view>{{healthy_end_time||'请选择日期'}}</view>
					<image src="/static/personal-center/right.png"></image>
				</view>
			</view>
		</view>
		<w-picker mode="date" :current="true" @confirm="onConfirm" ref="picker" :startYear="time" :endYear="time + 2"></w-picker>
		<view class="bg_02"></view>
		<view class="attestation_main">
			<view class="title">请上传本人的健康证照片</view>
			<view class="attestation_item">
				<image class="attestation_Img" @tap="changeImg()" :src="handheld_photo || '/static/bg/health.png'"></image>
			</view>
		</view>
		<button class="button" @tap="attestation">提交认证</button>
		<view class="bg_03"></view>
	</view>
</template>

<script>
	import wPicker from '@/components/w-picker/w-picker.vue';
	export default {
		data() {
			return {
				healthy_end_time: '',
				handheld_photo: '',
				time: 0
			};
		},
		onLoad() {
			const date = new Date();
			this.time = date.getFullYear();
		},
		methods: {
			async attestation() {
				/**
				 * 提交认证
				 */
				if (!this.formValidation()) {
					//表单验证
					return;
				}
				let [_user, user] = await this.userinfo();
				if (_user || user.data.status == 0) {
					//用户信息
					this.showToast('提交失败，请重试');
					return;
				}
				let url, data, method;
				if (user.data.data.user) {
					//判断用户第几次提交
					url = 'user/cleaner/' + this.isLogin().id;
					method = 'PUT';
					data = JSON.parse(JSON.stringify(this._data));
					delete data.time
				} else {
					url = 'user/cleaner';
					method = 'post';
					data = JSON.parse(JSON.stringify(this._data));
					data.id = this.isLogin().id;
					delete data.time
				}
				let [_upload, upload] = await this.getReq({
					url,
					method,
					data
				});
				if (_upload || upload.data.status == 0) {
					this.showToast('提交失败，请重试');
					return;
				}
				uni.navigateTo({
					url: '/pages/user/auditor'
				});
			},
			async changeImg() {
				/**
				 * 获取七牛云图片链接
				 */
				let [_chooseImage, chooseImage] = await uni.chooseImage({
					count: 1
				});
				if (_chooseImage) {
					this.showToast('图片上传失败');
					return;
				}
				let images = chooseImage.tempFilePaths[0]; //获取图片
				let key = 'attestation:' + new Date().getTime() + '.png'; //图片名称
				let qiniuImg = await this.qiniuUpload(images, key);
				if (!qiniuImg.imageURL) {
					this.showToast('图片上传失败');
					return;
				}
				this.handheld_photo = qiniuImg.imageURL; //七牛返回路径
			},
			async userInfoData() {
				/**
				 * 获取用户信息
				 */
				let [_user, user] = await this.userinfo();
				if (_user || user.data.status == 0 || !user.data.data.user) {
					return; //获取用户信息失败
				}
				for (let val in user.data.data.user) {
					for (let v in this._data) {
						if (val == v) this._data[v] = user.data.data.user[val];
					}
				}
			},
			dateData() {
				this.time = new Date().getFullYear()
			},
			changeDate() {
				/**
				 * 选择日期
				 */
				this.$refs.picker.show();
			},
			onConfirm(v) {
				/**
				 * 时间赋值
				 */
				v.checkArr.forEach(val => {
					this.healthy_end_time += val
				})
			},
			userinfo() {
				/**
				 * user 获取用户状态
				 */
				return this.getReq({
					url: 'user/accountInfo',
					data: {
						id: this.isLogin().id
					}
				});
			},
			formValidation() {
				/**
				 * 表单验证
				 */
				if (!this.handheld_photo) {
					this.showToast('请上传健康证');
					return false;
				}
				return true;
			}
		},
		components: {
			wPicker
		}
	};
</script>

<style lang="scss" scoped>
	.healthy {
		font-family: PingFang-SC-Medium;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0px;
		color: #333333;

		.set_box {
			width: 702upx;
			padding: 0 24upx;

			.set_item {
				height: 98upx;
				border-bottom: 1upx solid #e5e5e5;
				line-height: 98upx;
				display: flex;
				justify-content: space-between;

				.set_item_left {
					font-size: 28upx;
				}

				.set_item_reght {
					font-size: 28upx;
					color: #999999;
					display: flex;
					align-items: center;

					image {
						width: 12upx;
						height: 22upx;
						margin-left: 12upx;
					}
				}
			}
		}

		.attestation_main {
			text-align: center;

			.title {
				height: 98upx;
				line-height: 98upx;
				font-size: 32upx;
			}

			.attestation_item {
				margin: 0 auto;
				width: 564upx;
				height: 394upx;
				border-radius: 8upx;
				border: 1upx dashed #e5e5e5;
				display: flex;
				align-items: center;
				justify-content: center;

				.attestation_Img {
					width: 550upx;
					height: 380upx;
					background-color: #9ccafa;
					border-radius: 8upx;
				}
			}

			.box {
				margin-top: 30upx;
			}

			.attestation_text {
				height: 46upx;
				line-height: 46upx;
				font-size: 18upx;
				color: #b5b5b5;

				.safeguard {
					width: 16upx;
					height: 18upx;
					margin-right: 8upx;
					vertical-align: middle;
				}
			}
		}

		.button {
			margin-top: 124upx;
			width: 540upx;
			height: 90upx;
			background-color: #3595f9;
			border-radius: 8upx;
			font-size: 32upx;
			color: #ffffff;
		}

		.bg_01 {
			width: 750upx;
			height: 30upx;
			background-color: #f0f0f0;
		}

		.bg_02 {
			width: 750upx;
			height: 62upx;
		}

		.bg_03 {
			width: 750upx;
			height: 46upx;
		}
	}
</style>
